<template>
  <div class="tmpl">
    <div class="conment">
      <ul class="twul">
        <li v-for="list in lists">{{list.value}}</li>
      </ul>
    </div>
  </div>
</template>

<script type="text/javascript">
export default{
  data(){
    return {
      lists: [
        {value: '我是新闻列表1'},
        {value: '我是新闻列表2'},
        {value: '我是新闻列表3'},
        // {value: '我是新闻列表4'},
        // {value: '我是新闻列表5'},
        {value: '我是新闻列表1'},
      ],
      num: 0
    }
  },
  methods:{

  },
  mounted(){
      let _this = this;
      let listul = document.querySelector('.twul');

      setInterval(() => {
        _this.num++;
        if(!listul.classList.contains('transition')){
          listul.classList.add('transition');
        }
        listul.style.transform = 'translateY(-'+ (_this.num)*30 +'px)';

      },1000);
      console.log(this.num)
      console.log(111)


  },
  // watch: {
  //   num: function(val,oldval){
  //     let listul = document.querySelector('.twul');
  //     if(val > this.lists.length - 1){
  //       if(listul.classList.contains('transition')){
  //         listul.classList.remove('transition');
  //       }
  //       // listul.style.top = '0px';
  //       listul.style.transform = 'translateY(0px)';

  //       this.num = 0;

  //     }
  //   }
  // }
}
</script>

<style type="text/css" scoped>
  .tmpl{
    margin: 20px 0 20px;
  }
  .tmpl ul{
    list-style: none;
    margin: 0;
    transform: translate(0,0);
    transition: .3s all ease;
    position: absolute;
    top: 0px;
  }
  .tmpl ul li{
    height: 30px;
    line-height: 30px;
  }
  .conment{
    height: 32px;
    width: 60%;
    border: 1px solid #333;
    overflow: hidden;
    position: relative;
  }
  .transition{
    transition: .3s all;
  }
</style>